<template>
    <show-modal :title="title" :loading="loading" width="600px" @cancel="cancel" :isSure="false" @submit="submit">
        <a-form-model ref="form" v-bind="layout">
            <a-row :gutter="16">
                <a-col class="col_item" span="12">
                    <a-form-model-item label="工单名称" prop="orderName">
                        <span>{{info.orderName}}</span>
                    </a-form-model-item>
                </a-col>
                <a-col class="col_item" span="12">
                    <a-form-model-item label="工单类型" prop="orderName">
                        <field-tag
                            :value="info.orderType"
                            type="value"
                            showType="name"
                            :data="workOrderTypes"
                        ></field-tag>
                    </a-form-model-item>
                </a-col>
            </a-row>
        </a-form-model>

        <div class="order_process">
                <h3 class="title">执行流程</h3>
                <div class="time_line_box">
                    <a-timeline class="time_line">
                        <a-timeline-item v-for="node in trackList" :key="node.id" :color="node.result=='同意'?'green':'red'">
                            <div class="node_item">
                                <div class="node_side">
                                    <!-- <p class="name">层级名称：{{node.nodeName}}</p> -->
                                    <p class="leader_name" v-if="node.leaderName">层级负责人：{{node.leaderName}}</p>
                                    <p class="leader_name" v-if="node.result">审批结果：<a-tag :color="node.result==='同意'?'green':'red'">{{node.result}}</a-tag></p>
                                    
                                    <p class="leader_name">审批分数：{{node.score}}分</p>
                                    <p class="leader_name">处理意见：{{node.approvals}}</p>
                                    <div v-if="node.imageUrl">
                                        <upload-picture :list="node.imageUrl.split(',')" :disabled="true"/>
                                    </div>
                                    <p class="leader_name">处理时间：{{node.createTime}}</p>
                                </div>
                            </div>
                            <a-divider />
                        </a-timeline-item>
                    </a-timeline>
                </div>

            </div>
        
    </show-modal>
</template>
<script>
import UploadPicture from '@/components/uploadPicture'
import {remoteProcessList} from '@/api/workorder/flow'
import {workOrderTypes} from '../dictionary'

export default {
    name:'ProcessInfo',
    components:{
        UploadPicture
    },
    props:{
        info:{
            type:Object,
            default:()=>{}
        }
    },
    data(){
        return{
            loading: false,
            title: '执行流程',
            workOrderTypes,
            layout: {
                labelCol: { span: 5 },
                wrapperCol: { span: 19 }
            },
            trackList:[]
        }
    },
    created(){
        let {id} = this.info;
        this.getTrackList(id)
    },
    methods:{
        async getTrackList(id){
            let res = await remoteProcessList(id);
            this.trackList = res.data;
        },
        submit(){

        },
        cancel(){
            this.$emit('cancel')
        }
    }
}
</script>
<style lang="scss" scoped>
.order_process{
    // margin: 0 20px;
    .title{
        font-size: 14px;
        color: #333;
    }
    .time_line_box{
        margin: 20px 0 0 50px;
        .node_item{
            display: flex;
            .node_side{
                width: 440px;
                flex-shrink: 0;
                .name{
                    font-size: 14px;
                    color: #333;
                    font-weight: 500;
                }
                .leader_name{
                    margin-bottom: 5px;
                    font-size: 13px;
                }
            }
            .node_control{
                // display: flex;
                flex: 1;
                text-align: right;
            }
        }
    }
}
</style>